<template>
	<view>
		<view class="fingerprint">
			<view class="fingerprint-1">
				<image src="../../static/指纹.png" mode="aspectFit"></image>
			</view>
			<view class="fingerprint-2">
				<view class="fingerprint-5">指纹登录{{start}}</view>
				<view class="fingerprint-6">
					<view>开启后，可通过验证录入在本设备上的指纹信息</view>
					<view>快速登录优购。请确保您的设备上没有录入他人的</view>
					<view>指纹信息，否则可能影响您的优购账号安全</view>
				</view>
			</view>
			<view class="fingerprint-3">
				<text class="text2">查看</text> <text class="text1">《虚拟面容和指纹登录授权协议》</text>
			</view>
			<view class="fingerprint-4">
				<u-button :text="text" color="red" :plain="true" @click="but" :disabled='disabled'></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEnrolled: false,
				disabled: false,
				start: "未开启",
				text: "开启指纹登录",
			};
		},
		onLoad() {
			uni.$setNavigationBarColor()
			this.ifFingerPrint()
		},
		methods: {
			ifFingerPrint() {
				wx.checkIsSoterEnrolledInDevice({
					checkAuthMode: 'fingerPrint',
					success: (res) => {
						this.isEnrolled = res.isEnrolled			
						if (this.isEnrolled) {
							this.start = '已开启'
							this.text = "已开启指纹登录"
							this.disabled = true
						} else {
							this.disabled = false
							this.start = "未开启"
							this.text = "开启指纹登录"
						}
					}
				})
			},
			but() {
				wx.startSoterAuthentication({
					requestAuthModes: ['fingerPrint'],
					challenge: '123456',
					authContent: '请输入指纹',
					success: (res) => {
						this.start = '已开启'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fingerprint-1 {
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60px;
			height: 60px;
		}
	}

	.fingerprint-2 {
		display: flex;
		flex-direction: column;
		align-items: center;

		.fingerprint-5 {
			color: black;
			font-size: 15px;
			font-weight: 700;
		}

		.fingerprint-6 {
			padding-top: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #c9c9c9;
			font-size: 13px;
		}
	}

	.fingerprint-3 {
		padding-top: 20px;
		display: flex;
		justify-content: center;
		font-size: 13px;

		.text1 {
			color: #77b9d8;
		}

		.text2 {
			color: #a5a5a5;
		}
	}

	.fingerprint-4 {
		color: red;
		margin-top: 20px;
	}
</style>